<template>

  <el-button size="default" type="default" @click="backToList()">返回</el-button>
  <el-button size="default" type="default" @click="getDetail()">获取数据</el-button>
    <el-descriptions column="2">
        <el-descriptions-item label="游戏名：">{{ dataDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="标签：">
            <el-tag v-for="tag in dataDetail.tagList">
                {{ tag.name }}
            </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="价格：">￥&nbsp;{{ dataDetail.price }}</el-descriptions-item>
        <el-descriptions-item label="发行商：">{{ dataDetail.author }}</el-descriptions-item>
        <el-descriptions-item label="大小：">{{ dataDetail.size }}Mb</el-descriptions-item>
        <el-descriptions-item label="开售时间：">{{ dataDetail.saleTime }}</el-descriptions-item>

    </el-descriptions>
    <hr>
    <el-descriptions column="1">
        <el-descriptions-item label="简介：">{{ dataDetail.introduction }}</el-descriptions-item>
    </el-descriptions>
    <hr>
        <el-text>游戏图鉴</el-text>
    <el-descriptions column="1">
        <el-descriptions-item v-for="manual in manualList">
<!--            <el-image :src="manual.headUrl" />-->
            {{ manual.title }}  |  {{ manual.content }}
        </el-descriptions-item>

    </el-descriptions>


</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router/dist/vue-router";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")
const router = useRouter()
const route = useRoute()



const platformMap = ref(new Map([
    ['Steam', 'Steam'],
    ['Epic', 'Epic'],
    ['WeGame', 'WeGame'],
    ['Origin', 'Origin'],
    ['AppStore', 'AppStore'],
    ['暴雪游戏', '暴雪游戏'],
    ['微软游戏商店', '微软游戏商店'],
    ['MicrosoftStore', 'MicrosoftStore'],
    ['RockStar', 'RockStar'],
    ['GOG', 'GOG'],
    ['其它', '其它']
]))


const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})
const dataDetail = ref({
  id: "",
  name: "",
  tags: "",
  tagList: [
    {
      id: "",
      name: "",
      type: "",
      hotCount: 0,
      creatorId: "",
      creatorName: "",
      gmtCreateTime: "",
      modifierId: "",
      modifierName: "",
      gmtModifyTime: ""
    }
  ],
  price: 0.0,
  author: "",
  platform: "",
  size: "",
  saleTime: "",
  status: "",
  introduction: "",
  creatorId: "",
  creatorName: "",
  gmtCreateTime: "",
  modifierId: "",
  modifierName: "",
  gmtModifyTime: ""
    // id: "1",
    // name: "阴阳师",
    // tags: "回合制",
    // tagList: [{
    //     id: "1",
    //     name: "回合制",
    //     type: "",
    //     hotCount: 0
    // }],
    // price: 0.0,
    // author: "网易",
    // platform: "安卓",
    // size: "2G",
    // saleTime: "2019",
    // status: "1",
    // introduction: "好游戏",
    // creatorId: "",
    // creatorName: "",
    // gmtCreateTime: "",
    // modifierId: "",
    // modifierName: "",
    // gmtModifyTime: ""
})

const manualList = ref([])

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/game/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}

const dataList = ref([])

async function getDetail() {
  console.log(route.params.id)
  let resp = await getPostList({
    // id: id.values()
    id: route.params.id
  }, "/game/detail")
  console.log(resp)
  dataDetail.value = resp.data
}

function backToList() {
  router.back()
}
function wait() {
  ElMessage.info("功能开发中，敬请期待....")
}
</script>

<style scoped>


.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}


</style>